<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tree</title>
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css">
    <script type="text/javascript" src="ext-4.2.1.883/ext-all.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>

<script type="text/javascript">

    Ext.define('folderModel', {
        extend: 'Ext.data.Model',
        fields: [
            'folderName', 'id', 'pid'
        ]
    });

    Ext.define('myTreeStore', {
        extend: 'Ext.data.TreeStore',
        model: 'folderModel',
        clearOnLoad: true,
        proxy: {
            type: 'ajax',
            url: 'http://localhost:8080/folder/getList.do',
            actionMethods: {read: "POST"},
            reader: {
                type: 'json',
                root: 'data'
            },
            extraParams: {
                pid: '2'
            }
        },
        nodeParam: 'pid',
        root: {
            expanded: 'true',
            text: 'myroot'
        },
        autoLoad: true
    });

    var mts = Ext.create('myTreeStore', {});


    Ext.define('Folder', {
        extend: 'Ext.tree.Panel',
        title: '目录',
        width:500,
        height:200,
        store:mts,
        rootVisible:false,
        displayField:'folderName',
        initComponent: function () {
            var me = this;
            this.listeners = function (optd) {
                me.store.proxy().extraParams.pid = optd.get('id');
            };
            this.callParent();
        }
    });



    Ext.onReady(function () {


//        Ext.create('Ext.tree.Panel', {
//            title: 'Simple Tree',
//            width: 500,
//            height: 200,
//            store: mts,
//            rootVisible: false,
//            displayField: 'folderName',
//            renderTo: Ext.getBody(),
//            bbar: [
//                {xtype: 'button', text: 'Button 1'}
//            ],
//            listeners:{
//                beforeitemexpand:{
//                    fn:function (node,optd) {
//                        mts.store.proxy.extraParams.pid = node.get('id');
//                    }
//                }
//            }
//        });

        var viewport = Ext.create('Ext.container.Viewport',{
            layout:'fit',
            autoScroll:false
        });

        var tp = Ext.create('Folder',{});
        viewport.add(tp);


    });

</script>

</body>
</html>